const { join } = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: 'development', // development->开发环境 // 设置开发环境还是生产环境
  entry: join(__dirname, 'src/main.js'),
  output: {
    // 如何将js放置在一个单独的js文件夹下面输出
    path: join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        // css-loader 把代码解析成commonjs规范的代码
        // style-loader 把解析后的css代码插入页面
        // 执行顺序，从后往前，从下往上
        use: [
          // 将 JS 字符串生成为 style 节点
          // 'style-loader',

          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
        // options: {
        //   filename: 'css/[name].[hash:6][ext]',
        // },
      },
      // 解析png图片的
      {
        test: /\.(png|jpeg|gif)/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash:6][ext]',
        },
      },
      // {
      //   test: /\.ttf|eot|woff2?$/i,
      //   type: 'asset/resource',
      //   generator: {
      //     filename: 'font/[name].[hash:6][ext]',
      //   },
      // },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // 自动插入打包后的文件在这个模版中
      template: 'public/index.html',
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css', // 将生成的css放置在css这个文件下
      chunkFilename: '[id].css',
    }),
  ],
  devServer: {
    port: 8080,
    open: true,
  },
}
